<template>
    <view class="m-input-view">
        <input v-if="float == 'right'" :focus="focus_" :type="inputType" placeholder-style="text-align:right;color:#c4c7cc;"  :name="name" :value="value" @input="onInput" class="m-input-input" :placeholder="placeholder" style="text-align:right;width:100%;"
            :password="type==='password'&&!showPassword" @focus="onFocus" @blur="onBlur" :maxlength="maxLength" :disabled="disabled"/>
			<input v-if="float != 'right'" :focus="focus_" :type="inputType" placeholder-style="color:#c4c7cc;"  :name="name" :value="value" @input="onInput" class="m-input-input" :placeholder="placeholder" 
			    :password="type==='password'&&!showPassword" @focus="onFocus" @blur="onBlur" :maxlength="maxLength" :disabled="disabled"/>
       
    </view>
</template>

<script>
    
    export default {
        props: {
            /**
             * 输入类型
             */
            type: String,
            /**
             * 值
             */
            value: String,
            /**
             * 值
             */
            name: String,
            /**
             * 文字位置
             */
            float: String,			
            /**
             * 占位符
             */
            placeholder: String,
            /**
             * 是否显示清除按钮
             */
            clearable: {
                type: [Boolean, String],
                default: false
            },
            /**
             * 是否显示密码可见按钮
             */
            displayable: {
                type: [Boolean, String],
                default: false
            },
            /**
             * 自动获取焦点
             */
            focus: {
                type: [Boolean, String],
                default: false
            },
			/*
			 * maxLength
			 */
			maxLength:{
				type:Number,
				default:1000
			},
			/* 
			 * 是否禁用
			 */
			disabled:{
				type:Boolean,
				default:false
			}
        },
        model: {
            prop: 'value',
            event: 'input'
        },
        data() {
            return {
                /**
                 * 显示密码明文
                 */
                showPassword: false,
                /**
                 * 是否获取焦点
                 */
                isFocus: false
            }
        },
        computed: {
            inputType() {
                const type = this.type
                return type === 'password' ? 'text' : type
            },
            clearable_() {
                return String(this.clearable) !== 'false'
            },
            displayable_() {
                return String(this.displayable) !== 'false'
            },
            focus_() {
                return String(this.focus) !== 'false'
            }
        },
        methods: {
            clear() {
                // this.value = ''
				this.$emit("input","")
            },
            display() {
                this.showPassword = !this.showPassword
            },
            onFocus() {
                this.isFocus = true
            },
            onBlur(e) {
                this.$nextTick(() => {
                    this.isFocus = false
					this.$emit("onblur",e)
                })
            },
            onInput(e) {
                this.$emit('input', e.target.value)
            }
        }
    }
</script>

<style lang="scss">
    .m-input-view {
        display: block;
        padding: 20rpx 25rpx;
		width:500upx
    }

    .m-input-input {
        flex: 1;
		width:100%;
		color:#000;		
		font-size: $uni-font-size-base;
		text-align: left;
    }
    
    .m-input-icon{
        width: 20px;
    }
</style>
